<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }

          html, body {
              width: 100%;
              height: 100%;
          }

          #appLoading {
              width: 100%;
              height: 100%;
              background: #8676bd;
              font-family: 'Inconsolata', monospace;
          }

          .loading {
              background: #8676bd;
              font-family: 'Inconsolata', monospace;
              position: absolute;
              margin: auto;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              width: 100px;
              height: 100px;
              border-radius: 50%;
              border-top: 2px solid #ffea29;
              border-left: 1px solid transparent;
              border-right: 1px solid transparent;
              animation: rt 2s infinite linear;
          }

          .loading::before {
              position: absolute;
              margin: auto;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              width: 70px;
              height: 70px;
              border-radius: 50%;
              border-top: 2px solid #8d29ff;
              border-left: 1px solid transparent;
              border-right: 1px solid transparent;
              animation: rt 4s infinite linear reverse;
              content: "";
          }

          .loading::after {
              position: absolute;
              margin: auto;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              width: 0;
              height: 0;
              border-radius: 50%;
              border-top: initial;
              border-left: initial;
              border-right: initial;
              animation: cw 1s infinite;
              content: "";
              background: snow;
          }

          h1 {
              position: absolute;
              height: 40px;
              margin: auto;
              top: 200px;
              left: 0;
              right: 0;
              bottom: 0;
              text-transform: uppercase;
              text-align: center;
              letter-spacing: 0.1em;
              font-size: 14px;
              font-weight: lighter;
              color: white;
          }

          h1 span {
              display: none;
          }

          h1::after {
              animation: txt 5s infinite;
              content: "";
          }

          @keyframes rt {
              100% {
                  transform: rotate(360deg);
              }
          }

          @keyframes cw {
              0% {
                  width: 0;
                  height: 0;
              }
              75% {
                  width: 40px;
                  height: 40px;
              }
              100% {
                  width: 0;
                  height: 0;
              }
          }

          @keyframes txt {
              0% {
                  content: "加载中.";
              }
              50% {
                  content: "加载中..";
              }
              100% {
                  content: "加载中...";
              }
          }
      </style>
  </head>
  <body>
      <div id="appLoading">
          <div class="loading" ></div>
          <h1 id="loadingText"><span>加载中</span></h1>
      </div>
      <div id="app" style="display: none">
      </div>
  </body>
</html>
